<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--  svg 画一个小矩形 -->
  <svg width='400' height="400">
    <rect x=10 y=10 width='100' height='100' style="fill:#fff;stroke-width:3;stroke:#000"></rect>
    <rect x=100 y=100 width="50" height='50' style="stroke:red;fill:blue;stroke-width:5;opacity:0.5"></rect>
    <rect x=200 y=200 width="50" height='50' rx=10 ry=30 style="stroke:red;fill:blue;stroke-width:5;opacity:0.5"></rect>
    <!-- 
      RECT 矩形  
      width  height  控制盒子的宽高的
       x  y 控制盒子的起始位置（相对于svg的左上角）
       rx  ry 控制盒子的圆角
       style 是控制他的样式的

     -->
  </svg>


  <!-- 圆形 -->
  <svg width=400 height="400">
    <circle cx=150 cy=100 r=50  stroke-width=10 stroke="rgba(0,0,0,0.5)" fill='red'></circle>
    <circle cx=250 cy=200 r=50  style='stroke-width:10; stroke:rgba(0,0,0,0.5); fill:red'></circle>
  </svg>


  <!-- 椭圆形 -->
  <svg width=400 height="400">
    <ellipse cx=100 cy=100  rx=50  ry=90 stroke-width=10 stroke="rgba(0,0,0,0.5)" fill='red'></ellipse>
    <!-- 
      cx cy 圆心坐标
      rx 是横向半径
      ry 是纵向半径

     -->
  </svg>
  <svg width=400 height="400">
    <ellipse cx=200 cy=200 rx=180 ry=60 fill='red'></ellipse>
    <ellipse cx=100 cy=100 rx=80 ry=30 fill='yellow'></ellipse>
    <ellipse cx=150 cy=150 rx=130 ry=40 fill='blue'></ellipse>
  </svg>


  <!--  直线 -->
  <svg width=400 height="400">
    <line x1=10 y1=30  x2=100 y2=200   stroke='red' stroke-width=10></line>
    <!-- 
      x1 y1 起始坐标
      x2 y2 终点坐标
     -->
  </svg>


  <!-- 折线 -->
  <svg width=400 height="400">
    <polyline points="10,20 20,30 30,50 50,60" stroke='red' stroke-width="10" fill=none></polyline>

    <polyline points="10,20 50,20 50,80 100,80" stroke='red' stroke-width="10" fill='none'></polyline>
    <!-- 
      points='x,y  x1,y1  x2,y2 '

     -->
  </svg>

  <!-- 多边形 -->
  <svg width=400 height="400">
    <polygon points="10,20 50,20 50,80 100,80" fill='red' fill-rule="nonzero"></polygon>
    <polygon points="60,70 100,70 100,130 150,130" fill='red' fill-rule="evenodd"></polygon>

    <polygon points='200,50  280,200  120,120  300,120  180,200' fill-rule="nonzero"></polygon>
    <polygon points='200,250  280,400  120,320  300,320  180,400' fill-rule="evenodd"></polygon>
  </svg>


  <svg width=400 height="400">
    <path d="M100 50 L150 100 L150 200 L200 300 " fill='none' stroke='red'></path>
    <path d="m166.5,160.11458 c0,-4 4.91438,-16.29509 19,-27 c19.66386,-14.94431 65.0471,-38.8829 95,-50.99999c22.03497,-8.91399 36,-12 42,-13c0,0 1.75256,0.01022 2,3c0.50171,6.06203 2.31995,15.88983 3,32c1.05524,24.99772 -0.64465,33.07829 -5,51.99999c-4.62433,20.09019 -10.9563,35.23103 -14,53c-1.013,5.91386 1.41422,9.58578 0,11c-1.41422,1.41422 -6.28775,-3.81308 -14,-16c-12.47238,-19.70886 -42.25787,-69.80621 -67,-102.99999c-11.11655,-14.91384 -16.72398,-23.22273 -20,-27c-1.8532,-2.13675 0,-2 7,-2c32,0 84.32385,-2.33334 143,7c40.28568,6.40806 57,13 63,15c0,0 1.61731,0.07612 2,1c0.5412,1.30656 1.9447,1.00153 2,2c0.50076,9.04153 1,13 0,14c-3,3 -17.46826,10.56175 -36,16c-144.89966,42.52163 -182,36.99999 -198,40.99999l-4,2l-1,1l-1,1" id="svg_1" stroke-width="1.5" stroke="#000" fill="none"/>
  </svg>


</body>
</html>